<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>话题列表</title>
	<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
	<script src="./jquery/jquery-3.5.1.min.js"></script>
	<script src="./bootstrap/bootstrap.min.js"></script>
</head>

<body>

	<table class="table">
		<caption>
			<h2 style="text-align: center;">话题列表</h2>
		</caption>
		<thead>
			<tr>
				<th>id</th>
				<th>作者</th>
				<th>内容</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="table">
			<tr>
				<td>1</td>
				<td>Tanmay</td>
				<td>haha</td>
				<td><a href="detail.html">详情</a></td>
			</tr>
		</tbody>
	</table>

	<script>
		$(function () {
			$.getJSON("./discuss/list", function (data) {
				var html = "";
				$.each(data, function (index, item) {
					var line = "<tr>";
					line += "<td>" + item.id + "</td>";
					line += "<td>" + item.title + "</td>";
					line += "<td>" + item.content + "</td>";
					line += "<td><a href='detail.html?id=" + item.id + "' target='_blank'>详情</a></td>";
					html += line;
				})
				$("#table").html(html);
			});
		});
	</script>
</body>

</html>